<!doctype html>

<title>CodeMirror: merge view demo</title>
<meta charset="utf-8"/>


<link rel=stylesheet href="/html/lib/code/lib/codemirror.css">
<link rel=stylesheet href="/html/lib/code/addon/merge/merge.css">
<script src="/html/lib/code/lib/codemirror.js"></script>
<script src="/html/lib/code/mode/xml/xml.js"></script>
<script src="/html/lib/code/mode/css/css.js"></script>
<script src="/html/lib/code/mode/javascript/javascript.js"></script>
<script src="/html/lib/code/mode/htmlmixed/htmlmixed.js"></script>
<script src="./diff_match_patch.js"></script>
<script src="/html/lib/code/addon/merge/merge.js"></script>
<script src="/html/layui/layui.js"></script>
<style>
    .CodeMirror { line-height: 1.2; }
    @media screen and (min-width: 1300px) {
      /*article { max-width: 1000px; }*/
      #nav { border-right: 499px solid transparent; }
    }
    span.clicky {
      cursor: pointer;
      background: #d70;
      color: white;
      padding: 0 3px;
      border-radius: 3px;
    }
    .CodeMirror-merge, .CodeMirror-merge .CodeMirror{
        /*height:600px;*/
    }
  </style>


<article>
<h2>文件对比工具</h2>
<div id=view></div>
<span class=clicky onclick="panes = 2; initUI()">2栏</span>
<span class=clicky onclick="panes = 3; initUI()">3栏</span>
<span class=clicky onclick="toggleDifferences()">显示不同</span>
<span class=clicky onclick="connect = connect ? null :'align'; initUI()">对齐</span>
<span class=clicky onclick="collapse = !collapse; initUI()">折叠</span>

<script>
var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;
function initUI() {
  if (value == null) return;
  var target = document.getElementById("view");
  target.innerHTML = "";
  dv = CodeMirror.MergeView(target, {
    value: value,
    origLeft: panes == 3 ? orig1 : null,
    orig: orig2,
    lineNumbers: true,
    mode: "text/html",
    highlightDifferences: highlight,
    connect: connect,
    collapseIdentical: collapse,
    readOnly: false,
    allowEditingOriginals:true
  });
  layui.config({
			base: '/html/' //静态资源所在路径
		}).extend({
		}).use([ 'form'], function () {
        layui.$(".CodeMirror-merge, .CodeMirror-merge .CodeMirror").css("max-height", layui.$(window).height() - 200)
     })
  
}

function toggleDifferences() {
  dv.setShowDifferences(highlight = !highlight);
}

window.onload = function() {
    value="";
    if(dv){
        value = dv.editor().getDoc().getValue();
    }
  
  orig1="";
  orig2="";
  //orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
  //orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ").replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
  initUI();
  let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)
};

function mergeViewHeight(mergeView) {
  function editorHeight(editor) {
    if (!editor) return 0;
    return editor.getScrollInfo().height;
  }
  return Math.max(editorHeight(mergeView.leftOriginal()),
                  editorHeight(mergeView.editor()),
                  editorHeight(mergeView.rightOriginal()));
}

function resize(mergeView) {
  var height = mergeViewHeight(mergeView);
  for(;;) {
    if (mergeView.leftOriginal())
      mergeView.leftOriginal().setSize(null, height);
    mergeView.editor().setSize(null, height);
    if (mergeView.rightOriginal())
      mergeView.rightOriginal().setSize(null, height);

    var newHeight = mergeViewHeight(mergeView);
    if (newHeight >= height) break;
    else height = newHeight;
  }
  mergeView.wrap.style.height = height + "px";
}
</script>
</article>
